<template>
  <div class="write-secret-info">
    <group class="none-bottom-border">
      <cell-box class="cellbox-item">
        <flexbox>
          <flexbox-item class="title" :span="4">
            房源编号<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value leave-minute" :span="8">
            <input type="text" v-model="keyForm.PropertyID" style="margin-top:1px;" maxlength="30" oninput="value=value.replace(/[^A-Za-z0-9]/g,'');if(value.length>30) value=value.slice(0,30)" placeholder="请输入房源编号">
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item">
        <flexbox>
          <flexbox-item class="title" :span="4">
            钥匙密码<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value leave-minute" :span="8">
            <input type="text" v-model="keyForm.keyPassword" maxlength="20" oninput="value=value.replace(/[^A-Za-z0-9]/g,'');if(value.length>30) value=value.slice(0,30)" placeholder="请输入钥匙密码">
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item">
        <flexbox>
          <flexbox-item class="title" :span="4">
            业主名称<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value leave-minute" :span="8">
            <input type="text" maxlength="20" style="margin-top:1px;" onkeyup="value=value.replace(/[^\u4E00-\u9FA5A-Za-z]/g,'');if(value.length>20) value=value.slice(0,20)" v-model="keyForm.clientName" placeholder="请输入业主名称">
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item">
        <flexbox>
          <flexbox-item class="title" :span="4">
            业主电话<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value leave-minute" :span="8">
            <flexbox>
              <flexbox-item :span="4.4">
                <select style="width:100%;border:none;" v-model="keyForm.areaCode">
                  <option value="+853">澳门(+853)</option>
                  <option value="+852">香港(+852)</option>
                  <option value="+86">大陆(+86)</option>
                  <option value="+">其他(+)</option>
                </select>
              </flexbox-item>
              <flexbox-item :span="7.6">
                <input :span="6" type="phone" v-model="keyForm.mobilePhone" :oninput="checkMobilePhone()" placeholder="请输入业主电话">
              </flexbox-item>
            </flexbox>
            <!-- <input type="phone" v-model="keyForm.mobilePhone" oninput = "value=value.replace(/[^\d]/g,'');if(value.length>11) value=value.slice(0,11)" placeholder="请输入手提电话"> -->
          </flexbox-item>
        </flexbox>
      </cell-box>
      
      <cell-box class="cellbox-item">
        <flexbox class="remarks">
          <flexbox-item class="title" :span="4">
            备注
          </flexbox-item>
          <flexbox-item class="value" :span="8">
            <x-textarea class="apply-reason" v-model="keyForm.remarks" :placeholder="'请输入备注'"></x-textarea>
          </flexbox-item>
        </flexbox>
      </cell-box>

      <cell-box class="cellbox-item" v-if="changeApplyType === '修改申请原因'">
        <flexbox>
          <flexbox-item class="title" :span="4">
            修改申请原因<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value" :span="8">
            <x-textarea class="apply-reason" :max="200" v-model="editApplyReason" :placeholder="'请输入修改申请原因'"></x-textarea>
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item" v-if="changeApplyType === '重新申请原因'">
        <flexbox>
          <flexbox-item class="title" :span="4">
            重新申请原因<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value" :span="8">
            <x-textarea class="apply-reason" :max="200" v-model="reApplyReason" :placeholder="'请输入重新申请原因'"></x-textarea>
          </flexbox-item>
        </flexbox>
      </cell-box>
    </group>
  </div>
</template>

<script>
  import { Group, CellBox, Flexbox, FlexboxItem, XTextarea, Datetime } from 'vux';
  export default {
    name: 'AskLeaveInfo',
    data () {
      return {
        reApplyReasonShow: false,
        reApplyReason: '',      // 重新申請原因
        editApplyReason: '',    // 修改申請原因
        changeApplyType: '',
        keyForm:{
          PropertyID:'',//楼盘编号
          keyPassword:'',
          clientName:'',
          areaCode:'+853',
          mobilePhone:'',
          remarks:''
        },
      };
    },
    components: {
      Group,
      CellBox,
      Flexbox,
      FlexboxItem,
      XTextarea,
      Datetime
    },
    mounted () {
    },
    methods: {
      checkMobilePhone(){
        this.keyForm.mobilePhone = this.keyForm.mobilePhone.replace(/[^\d]/g,'');
        if(this.keyForm.areaCode === "+853" || this.keyForm.areaCode === "+852"){
          if(this.keyForm.mobilePhone.length > 8)this.keyForm.mobilePhone = this.keyForm.mobilePhone.slice(0,8)
        }else if(this.keyForm.areaCode === "+86"){
          if(this.keyForm.mobilePhone.length > 11)this.keyForm.mobilePhone = this.keyForm.mobilePhone.slice(0,11)
        }else{
          if(this.keyForm.mobilePhone.length > 15)this.keyForm.mobilePhone = this.keyForm.mobilePhone.slice(0,15)
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../assets/style/variable';
  .write-secret-info{
    .none-bottom-border{
      .annex-inner{
        display:flex;
        justify-content: space-between;
        align-items: center;
        .annex-inner-title{
          width:90%;
        }
        .annex-inner-img{
          width:10%;
          text-align: right;
        }
      }
    }  
  }
  .cellbox-item{
    padding: 0 15px;
    &:before{
      border-color: #e6e6e6;
    }
    .title{
      color: #666;
      font-size: getRem(28);
      padding: getRem(32) 0;
    }
    .value{
      font-size: getRem(28);
    }
    .date-pciker{
      padding: getRem(32) 0;
      a{
        display: inline;
        padding: 0;
        color: #ddd;
        &:before{
          content: none;
        }
      }
      .has-value{
        color: #333;
      }
      .separation-symbol{
        color: #666;
      }
    }
    .leave-minute{
      select{
        padding: 15.36px 0;
      }
      input{
        display: block;
        width: calc(100% - 15px);
        border: 0; 
        padding: getRem(32) 0;
        line-height: getRem(38);
        font-size: getRem(28);
        &::placeholder{
          color: #ddd;
        }
      }
    }
    .apply-reason{
      padding: getRem(32) 0;
    }
    .leave-type{
      padding: getRem(32) 0;
      label{
        display: block;
        line-height: getRem(42);
        padding: 0 getRem(10) getRem(10) getRem(50);
        position: relative;
      }
      .other-type{
        display: inline-block;
        width: calc(100% - #{getRem(120)});
        border: 0;
        font-size: getRem(28);
        line-height: getRem(50);
        border-radius: 0;
        padding: 0 getRem(10);
        border-bottom: .5px solid #ddd;
        &:disabled{
          background: #fff;
        }
      }
      .apply-radio{
        position: absolute;
        left: 0;
        top: getRem(3);
        display: inline-block;
        appearance: none;
        -webkit-appearance: none;
        width: getRem(36);
        height: getRem(36);
        background: url(../../assets/images/radio-default.png) no-repeat center center;
        background-size: getRem(36) getRem(36);
        &:checked{
          background-image: url(../../assets/images/radio-selected.png);
        }
      }
    }
    .select-images-list{
      margin-top: getRem(20);
    }
  }
  .vux-flexbox{
    align-items: flex-start;
  }
 .vux-x-textarea /deep/ .weui-textarea{
   height: getRem(100);
 }     
 .vux-flexbox-item.value.leave-type label{
    padding-left: 0px!important;
    padding:10px 0;
  }
  input[type="checkbox"]{
    width:20px;
    height:20px;
    display: inline-block;
    text-align: center;
    vertical-align: middle; 
    line-height: 18px;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 3px;
  }
  input[type="checkbox"]::before{
    content: "";
    background: url(../../assets/images/unselect_icon@3x.png) no-repeat center;
    background-size: getRem(40) getRem(40);
    background-color: #fff;
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    border: none!important;
    border-radius: 3px;
  }
  input[type="checkbox"]:checked::before{
    // content: "\2713";
    content: "";
    background-color: #fff;
    position: absolute;
    background: url(../../assets/images/selected_icon@3x.png) no-repeat center;
    background-size: getRem(40) getRem(40);
    top: -1px;left: -1px;
    width:100%;
    border: none!important;
    // border: 1px solid #e50232;
    // color:#e50232;
    font-size: 20px;
    width: 21px;
    height: 21px;
    font-weight: bold;
  }
  .input[type="checkbox"]:checked{
    border: none!important;
  }
  input:focus{
    outline: none!important;
  }
  .vux-flex-row{
    align-items: flex-start;
  }
  select {
    color: #333;
    font-size: getRem(28);
    /*统一边框*/
    border: solid 1px #000;
    /*将默认的select选择框样式清除*/
    appearance:none;//这个样式就是清除他的下拉按钮的默认样式
    -moz-appearance:none;
    -webkit-appearance:none;
    /*替换选择框的最右侧显示小箭头图片*/
    background: url(../../assets/images/down-arrow.png) no-repeat right center transparent;
    background-size: getRem(28);
    /*为下拉小箭头留出一点位置，避免被文字覆盖*/
    // padding-right: 14px;
  }
  select:focus{
    outline: none!important;
  }
  /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
  select::-ms-expand { display: none; }
</style>